<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style >
#map_div{
 border:1px solid #aaaaaa;
 width:500px;
 height:800px;

 }
</style>
<script src='http://maps.google.com/maps/api/js?sensor=true'></script>


<script>

function getId(id){return document.getElementById(id)}

window.onload=function(){

	var div=getId('map_div');
	var latlng;
	
	//표시할 위도 경도를 객체 생성
	getId('btnHome').onclick=function(){
		latlng=new google.maps.LatLng(36.6343780,127.4335620);
		viewMap();
		title='집';
		
	}
	getId('btnLover1').onclick=function(){
		latlng=new google.maps.LatLng(35.8714350,128.6014450);
		viewMap();
		title='애인1';
	}
	
	getId('btnLover2').onclick=function(){
		latlng=new google.maps.LatLng(37.5703660,126.9919520);
		viewMap();
		title='애인2';
	}
	function viewMap(){
		
		//지도를 div에 표시
		var gmap= new google.maps.Map(
			div,
			{
				zoom:23,
				center:latlng,
				mapTypeId:google.maps.MapTypeId.ROADMAP
			}
		
			); 
		
			//지도 위에 마커 표시(JSON유형으로)
			var market=new google.maps.Marker({
				position:latlng,
				map:gmap,
				
			});	
	}
	
}



</script>
</head>
<body>

<h1>Google Map</h1>
<div id='map_div'> </div>
<input type='button' value='우리집' id='btnHome'>
<input type='button' value='애인집1' id='btnLover1'>
<input type='button' value='애인집2' id='btnLover2'>


</body>
</html>